*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    font-size: 11px;
}

input,button,select{
    border: none;
}

li,ol,dl{
    list-style: none;
}

a{
    text-decoration: none;
}

//nav-start
.nav-bg{
    width: 100%;
    height: 40px;
    background: #333333;
    line-height: 40px;
    .nav{
        width: 1226px;
        height: 40px;
        margin: 0 auto;
        //左边
        .left{
            height: 40px;
            float: left;
            color: #424242;
            a{
                color: #b0b0b0;
                padding: 0 5px;
                &:hover{
                    color: #fff;
                }
            }
        }
        //右边
        .right{
            float: right;
            height: 40px;
            a{
                color: #b0b0b0;
                padding: 0 5px;
                &:hover{
                    color: #fff;
                }
               // 交叉选择器 a.shop-car
                &.shop-car{
                    padding: 0 10px;
                    background: #424242;
                    display: block;
                    height: 40px;
                    float: right;
                }
                span{
                    display: block;
                    width: 40px;
                    height: 40px;
                    float: left;
                    margin-top: 5px;
                    background: url(../img/car.jpg) no-repeat;
                }
            }
        }
    }
}
//nav-end

.search{
    width: 1226px;
    height: 55px;
    margin: 15px auto;
    //左边
    .left{
        width: 211px;
        float: left;
        a{
            display: block;
            width: 55px;
            height: 55px;
            background: url(../img/mi01.jpg) no-repeat;
        }
    }
    //右边
    .right{
        width: 1226-211px;
        height: 55px;
        float: left;
        ul{
            li{
                float: left;
                line-height: 55px;
                a{
                    font-size: 16px;
                    color: #333333;
                    padding-left:35px;
                    display: block
                    &：hover{
                        color:red;
                    }
                }
            }
        }
        .form-a{
            float:right;
            form{
                width: 294px;
                height: 49px;
                border: 1px solid #E0E0E0;
                position:relative;
                .input{
                    width: 245px;
                    height: 49px;
                }
                .submit{
                    width: 294-245px;
                    height: 55px;
                    background: url(../img/fada.jpg)no-repeat;
                    float: right;
                }
            }
            .tag{
                float: right;
                position:absolute;
                margin-top:-32px;
                margin-left: 130px;
                a{
                  display: block;
                  color: darkgrey;
                  float: left;
                  padding-left: ;
                  background: gainsboro;
                  &:hover{
                      color: white;
                      background: #FF6700;
                  } 
                }
                .form-b{
                    margin-left: 5px;
                }
            }
        }
    }
}

.sub-nav{
    width: 1226px;
    height: 460px;
    margin: 0 auto;
    background: red;
    .left{
        width: 235px;
        height:460px;
        background: #5C564F;
        float: left;
        a{
            display: block;
            width: 235px;
            height: 43px;
            font-size: 14PX;
            line-height: 43px;
            text-indent: 31px;
            color: white;
            margin-top: 20px;
            &:hover{
                background: #FF6700;
            }
            img{
                display: block;
                float:right;
                padding-top: 15px;
            }
        }
        .sub-a{
            margin: 0;
            background: right;
        }
    }
//  右边
    .right{
        widows: 960px;
        height: 460px;
        background: cyan;
        a{
            display: block;
            float: right;
            img{
                display: block;
                float: right;
            }
        }
    }
}
//轮播区域结束

//服务区域
.for{
    width: 1226px;
    height: 203px;
    margin: 0 auto;
    margin-top: 17px;
    .left{
        width: 235px;
        height:203px ;
        float: left;
        background: #5F5750;
    }
    .right{
        width: 1226-203;
        height: 203px;
        float: right;
        a{
            display: block;
            float: left;
            margin-left: 13.2px;
        }
        
    }
}
//服务区域结束

//展示区域
.zhanshi{
    width: 1226px;
    height: 58px;
    margin: 0 auto;
    margin-top: 27px;
    p{
        font-size: 22px;
        line-height: 58px;
        display: block;
        float: left;
        font-weight: 200;
    }
//  右边
    .right{
        width: 72px;
        height: 24px;
        float: right;
        margin-top: 25px;
        border: 1px solid #E0E0E0;
        .right-a{
            width: 36px;
            height: 24px;
            display: block;
            float: left;
        }
        .right-b{
            float: right;
            width:36px;
            height: 24px;
            display: block;
        }
    }
}

.img{
    width: 1226px;
    height: 340px;
    margin: 0 auto;
    ul{
        width: 234px;
        height: 340px;
        background: #FAFAFA;
        float: left;
        border-top: 1px solid #FFAC13;
        li{
            a{
                width:230px ;
                height:195px ;
                display: block;
                float: left;
                img{
                    display: block;
                    margin-top: 41px;
                    margin-left: 35px;
                }
//             
            }
            .img-a{
                width: 230px;
                height:21px;
                text-align: center;
                font-size: 14px;
                margin-top: 34px;
            }
            p{
                display: block;
                float: left;
                width: 230px;
                height: 21px;
                text-align: center;
                line-height: 21px;
                color: #B0B0B0;
            }
            .p{
                margin-top: 8px;
                font-size: 14px;
                color: red;
            }
        }
    }
    .right-n{
        margin-left: 14px;
    }
}
//展示区域结束

//中间灰部    区域
#center{
    width: 100%;
    height: 4680px;
    background: #F5F5F5;
    margin-top: 41px;
    .center-a{
        width: 1226px;
        height: 58px;
        margin: 0 auto;
        padding-top: 60px;
        h2{
            float: left;
            font-size: 20px;
            font-weight: 200;
            line-height: 58px;
        }
        a{
           display: block;
           float:right;
           line-height: 58px;
           color: black;
           font-size: 16px;
           span{
               float: right;
               width: 21px;
               height: 24px;
               margin-left: 5px;
               display: block;
               margin-top: 18px;
               background: url(../img/mitu.jpg) no-repeat;
           }
           &:hover{
               color: red;
           } 
        }
    }
}

.center-b{
    width: 1226px;
    height: 614px;
    margin: 0 auto;
    .left{
        width:234px;
        height:614px ;
        background: yellowgreen;
        float: left;
        a{
            width: 234px;
            height: 614px;
            display: block;
            background: url(../img/miseven.jpg) no-repeat;
        }
    }
//  右边
    .conter{
            height: 6140px;
            div{
                height:300px ;
                ul{
                    width: 234px;
                    height: 300px;
                    float: left;
                    background: white;
                    li{
                        a{
                            width:230px ;
                            height:195px ;
                            display: block;
                            float: left;
                            img{
                                display: block;
                                

                        }  
                    }
                        .img-a{
                            width: 230px;
                            height:21px;
                            text-align: center;
                            font-size: 14px;
                            margin-top: 15px;
                        }
                        p{
                            display: block;
                            float: left;
                            width: 230px;
                            height: 21px;
                            text-align: center;
                            line-height: 21px;
                            color: #B0B0B0;  
                        }
                        .p{
                            margin-top: 8px;
                            font-size: 14px;
                            color: red; 
                        }
                    }
                }
                .conter-a{
                    margin-left: 14px;
                }
            }
        }
    }
     
    .oui{
        height: 300px;
        margin-top: 14px;
    }
      
//   智能硬件区域结束

//搭配区域
.dapei{
    width: 1226px;
    height:58px ;
    margin: 0 auto ;
    margin-top: 22px;
    h2{
       float: left;
       font-size: 20px;
       font-weight: 200;
       line-height: 58px; 
    }
    a{
        display: block;
        float:right;
        font-size: 16px;
        line-height: 58px;
        color: black;
        margin-left: 33px;
        &:hover{
            color: red;
        }
    }
}

.dapei-tu{
    width: 1226px;
    margin: 0 auto;
    .top{
        widows: 1226px;
        height: 300px;
        margin-bottom: 14px;
        ul{
            width: 234px;
            height: 300px;
            float: left;
            background: white;
            li{
                a{
                    display: block;
                    height: 195px;
                    width: 234px;
                    display: block;
                    float: left;
                    img{
                        display: block;
                    }
                }
            }
        }
        .top-a{
            margin-left: 14px;
            .yuan{
                width: 234px;
                height: 21px;
                line-height: 21px;
                text-align: center;
                color: #000000;
                font-size: 14px;
            }
            .dian{
                .tua{
                    margin-top: 20px;
                    margin-left:35px ;
                }
            }
            span{
                float: left;
                display: block;
                width: 234px;
                height: 21px;
                color: red;
                font-size:14px;
                line-height: 21px;
                text-align: center;
            }
            .na{
                color: #000000;
                margin-top: 12px;
            }
        }
    }
}
//搭配区域结束

//配件区域
//配件区域结束
.tuijaian{
    width: 1226px;
    height: 58px;
    margin: 0 auto;
    margin-top: 27px;
    p{
        font-size: 22px;
        line-height: 58px;
        display: block;
        float: left;
        font-weight: 200;
    }
//  右边
    .right{
        width: 72px;
        height: 24px;
        float: right;
        margin-top: 25px;
        border: 1px solid #E0E0E0;
        .right-a{
            width: 36px;
            height: 24px;
            display: block;
            float: left;
        }
        .right-b{
            float: right;
            width:36px;
            height: 24px;
            display: block;
        }
    }
}

.jian{
    width: 1226px;
    height: 340px;
    margin: 0 auto;
    ul{
        width: 234px;
        height: 340px;
        float: left;
        background: white;
        li{
            a{
                width:230px ;
                height:195px ;
                display: block;
                float: left;
                background: white;
                img{
                    display: block;
                    margin-top: 41px;
                    margin-left: 35px;
                }
//             
            }
            .img-a{
                width: 230px;
                height:21px;
                text-align: center;
                font-size: 14px;
                margin-top: 34px;
                color: #000000;
            }
            p{
                display: block;
                float: left;
                width: 230px;
                height: 21px;
                text-align: center;
                line-height: 21px;
                color: #B0B0B0;
            }
            .p{
                margin-top: 8px;
                font-size: 14px;
                color: red;
            }
        }
    }
    .tui{
        margin-left: 14px;
    }
}



.pai{
    width: 1226px;
    height: 415px;
    margin: 0 auto;
    ul{
        width: 296px;
        height: 415px;
        float: left;
        background: white;
        li{
            a{
                width:296px ;
                height:220px ;
                display: block;
                float: left;
                background: white;
                img{
                    display: block;
                }
//             
            }
            .img-a{
                width: 296px;
                height:21px;
                text-align: center;
                font-size: 14px;
                margin-top: 34px;
                color: black;
            }
            p{
                display: block;
                float: left;
                width: 296px;
                height: 21px;
                text-align: center;
                line-height: 21px;
                color: #B0B0B0;
            }
            .p{
                margin-top: 8px;
                font-size: 14px;
                color: red;
            }
        }
    }
    .tui{
        margin-left: 14px;
    }
}


.shiping{
    width: 1240px;
    height: 285px;
    margin: 0 auto;
    ul{
        width: 296px;
        height: 285px;
        float: left;
        background: white;
        li{
            iframe{
                width:294px ;
                height:180px ;
                display: block;
                float: left;
                background: white;
//              border: none;
//             
            }
            a{
                float: left;    
                display: block;
                width: 296px;
                height:21px;
                text-align: center;
                font-size: 14px;
                margin-top: 22px;
                color: #000000;
                &:hover{
                    color: red;
                }
//              background: yellowgreen;
            }
            p{
                display: block;
                float: left;
                width: 296px;
                height: 21px;
                text-align: center;
                line-height: 21px;
                color: #B0B0B0;
                margin-top: 8px;
            }
        }
    }
    .shi{
        margin-left: 14px;
    }
}
//推荐区域

//推荐区域结束
//中间灰部区域结束

//底部灰色区域
.bottom{
    width: 1226px;
    height: 80px;
    margin: 0 auto;
    ul{
        width: 244px;
        height: 25px;
        border-right:1px solid #E0E0E0 ;
        margin-top: 25px;
        float: left;
        text-align: center;
        li{
            a{
                display: block;
                font-size: 16px;
                color: black;
                position:relative;
                &:hover{
                    color: red;
                }
                
            }
        }
    }
    .bottom-l{
        border: none;
    }
}


//bottom-list
.bottom-list{
    width: 1226px;
    height: 192px;
    border-top:1px solid  #E0E0E0;
    margin: 0 auto;
    ul{
        width: 162px;
        height: 162px;
        float: left;
        margin-top: 30px;
        li{
            p{
                width: 160px;
                display: block;
                color: black;
                float: left;
                font-size: 14px;
            }
            .a{
                width: 160px;
                float: left;
                display: block;
                color: #757575;
                margin-top: 32px;
                font-weight: 200;
            }
            a{
                display: block;
                float: left;
                color: #757575;
                width: 160px;
                font-size: 12px;
                margin-top: 17px ;
                &:hover{
                    color: red;
                }
            }
        }
    }
    .kefu{
        width: 251px;
        height: 162px;
        border-left: 1px solid #E0E0E0;
        text-align: center;
        li{
            .p{
                width: 251px;
                color: red;
                font-size: 22px;  
            }
            .p-a{
                width: 251px;
                margin-top: 25px;
            }
            .p-b{
                width: 251px;
                text-align: center;
            }
            .kefu-a{
                width: 120px;
                height: 30px;
                border: 1px solid red;
                line-height: 30px;
                color: red;
                margin-left: 67px;
                &:hover{
                    color: white;
                    background: red;
                }
                
            }
        }
        
    }
}
#jieshu{
    width: 100%;
    height: 146px;
    background: #FAFAFA;
    float: left;
    .end{
        width: 1226px;
        margin: 0 auto;
        height: 36px;
        margin-top: 32px;
//      左边
        .ky{
          width: 36px;
          height: 36px;
          float: left; 
        }
        .left{
            float: left;
            width: 880px;
            height: 36px;
            ul{
                float: left;
                li{
                    a{
                        display: block;
                        float: left;
                        color: #757575;
                        line-height: 18px;
                        margin-right: 5px;
                        span{
                            margin-left: 5px;
                        }
                        &:hover{
                            color: red;
                        }
                    }
                }
            }
            .it{
                li{
                    p{
                        display: block;
                        color:#b0b0b0 ;
                        float: left;
                        line-height: 18px;
                    }
                    a{
                        color: #b0b0b0;
                    }
                }
            }
        }
//      右边
        .right{
            width: 85px;
            height: 36px;
            float:right;
            a{
               display: block;
               float: right; 
               margin-top: 2px;
               color: #b0b0b0;
            }
            img{
                display: block;
                float: left;
                margin-top: -9px;
                padding-left: 15px;
            }
        }
    }
}

#tansuo{
    width:267px;
    height: 19px;
    margin: 0 auto;
    padding-top: 31px ;
    
}

//底部灰色的区域结束

